namespace GreeterN {
    export interface GreeterProps extends React.Props<GreeterC> {
        whomToGreet: string;
        greeting?: string| (() => string);
    }

    export class GreeterC extends React.Component<GreeterProps, {}> {
        render() {
            let g = this.props.greeting;
            let greeting = 'Hello';
            if (typeof g === 'string') {
                greeting = g;
            } else if (g) {
                greeting = g();
            }

            return (
                <div>{greeting}, {this.props.whomToGreet}</div>
            );
        }
    }

    export interface ContactItem {
        name: string;
        relation: string;
        phone: string;
    }

    export class ContactList extends React.Component<{data: ContactItem[]}, {}> {
        render() {
            let contactData = this.props.data;
            let list = contactData.map((item) => {
                return (
                    <li>{item.name}</li>
                );
            })
            return (
                <ol>
                    {list}
                </ol>
            );
        }
    }
}